<script setup>
import { ref, defineProps,reactive } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import { reqGroupDetail,postGroupBatch,reqGroupDetailSync,userBatchDetails } from '@/api'
import labels from '@/components/app/label.vue'
import { toRaw } from '@vue/reactivity'
import Chart from './drawer/chart.vue'
import Table from './drawer/table.vue'
import Detail1 from '@/components/app/customerDetail/index.vue'
import Detail from '@/components/app/customerDetail/index.vue'

const isShow =  ref(true)
const detail1 = ref(null)
const props = defineProps({
	drawer: Boolean
})
console.log(props.drawer)
const drawers = ref(props.drawer)
const emits = defineEmits(['changeDrawer'])
const showDetail = (id)=>{
	setTimeout(()=>{
		isShow.value = false
		setTimeout(() => {
			detail1.value.show(id)
		}, 5);
	},5)
}
const details = ref(null)
const drawerdata = reactive({
	add_count: '',
	all_count: '',
	avatar: '',
	customer: [],
	name: '',
	id: ''
})
const showStaffDetail = (id)=>{
	console.log(id)
	userBatchDetails({ staffid: id }).then((res) => {
		drawerdata.add_count = res.data.add_count
		drawerdata.all_count = res.data.all_count
		drawerdata.avatar = res.data.avatar
		drawerdata.customer = res.data.customer
		drawerdata.name = res.data.name
		drawerdata.id = res.data.id
	})
	isShow.value = false
}

const TestRef1 = ref(null)
const drawerSize = ref('70%')
const fullScreen = () => {
	if (drawerSize.value === '100%') {
		drawerSize.value = '70%'
	} else {
		drawerSize.value = '100%'
	}
}
const handleSync = async()=>{
	const r = await reqGroupDetailSync({chat_id:chatId.value})
	if (r){
		getData()
		ElMessage({ message: '同步成功', type: 'success' })
	}
}
const chatId = ref('')
const form = ref({})
const show = async(chat_id) =>{
	console.log('asdasdasdasd');
	chatId.value = chat_id
	getData()
}
const charts = ref()
const table = ref(null)
const getData = async()=>{
	
	reqGroupDetail({chat_id:chatId.value}).then(res=>{
		form.value = res.data
		isShow.value = true
		drawers.value=true
		setTimeout(()=>{
			charts.value.show(chatId.value,form.value.create_time)
			table.value.show(chatId.value)
		},5)
	})
	
	// const r = await reqGroupDetail({chat_id:chatId.value})
	// if (r) {
	// 	form.value = r.data
	// 	setTimeout(()=>{
	// 		charts.value.show(chatId.value,form.value.create_time)
	// 		table.value.show(chatId.value)
	// 	},5)
	// }
	
}
const addTag = () =>{
	var data = {
			show:true,
			type:1,
		title:'打群标签',
		tips:'将给满足条件的客户批量打标签，请选择标签',
		tipsshow:true,
		}
  	TestRef1.value.tableshow(data)
}
const labeldataapi1=(val)=>{
	var arr = []
	val.list.forEach(item=>{
		arr.push(toRaw(item).tag_id)
	})

	postGroupBatch({chatIds:[chatId.value],tags:arr}).then(res=>{

ElMessage({
	message: '添加成功',
	type: 'success',
})
getData()
})

}

const closeDrawer = () => {
	emits('changeDrawer', false)
}

defineExpose({
	show
})
</script>
<template>
	<div class="drawer">
		<el-drawer :size="drawerSize" v-model="drawers" :with-header="false" @close="closeDrawer">
			<div v-if="isShow" class="draw-container">
				<div class="draw-header">
					<div class="title">群详情</div>
					<div class="icon-group">
						<el-tooltip effect="dark" placement="bottom">
							<template #content>
								<p class="box-item">{{ drawerSize === '70%' ? '全屏模式' : '退出全屏' }}</p>
							</template>
							<MyIcon
								@click="fullScreen"
								v-if="drawerSize === '70%'"
								class="icon-item"
								style="font-size: 12px"
								name="Fullscreen"
							/>
							<MyIcon @click="fullScreen" v-else class="icon-item" name="fullscreenExit" />
						</el-tooltip>

						<el-icon @click="closeDrawer" class="icon-item"><Close /></el-icon>
					</div>
				</div>
				<div class="draw-main">
					<div class="draw-main-gruop">
						<div class="main-grop-left">
							<div class="main-grop-left-header">
								<div class="group-img">
									<img
										src="../../../../assets/img/img/avatar-room-default.67bead38e751.svg"
										alt=""
									/>
									<div class="group-info">
										<p style="margin-bottom: 6px">{{form.name}}</p>
										<div class="flex-center" v-if="form.staff"  style="font-size: 13px; color: #000000d9">
											群主：<el-image style="width:30px;height:30px;margin-right: 10px;" :src="form.staff.avatar" alt="" />
											{{form.staff.name}}<el-divider direction="vertical" /><span>共{{form.size}}位群成员</span>
										</div>
									</div>
								</div>
								<div class="header-btn">
									<el-button color="#178af5" @click="getData" :dark="isDark" plain>同步</el-button>
									<!-- <el-button color="#178af5" :dark="isDark" plain>聊天记录</el-button> -->
								</div>
							</div>
							<labels ref="TestRef1" :labeldataapi="labeldataapi1"></labels>
							<div>
								<div style="font-size: 14px;margin-top:20px">群聊标签:
									<span v-for="item in form.tags">
          <el-popover v-if="item.deleted==0"

											popper-style="padding: 10px;min-width:0px"
											placement="right"
											:width="100"
											trigger="hover"
										>
											<div>已删除</div>
											<template #reference>
												<el-tag :type="item.deleted==1?'':'info'" class="app-br-10">
                            <span class="app-regular-font" >{{item.name}}</span>
                      </el-tag>
											</template>
										</el-popover>

          <el-tag v-else :type="item.deleted==1?'':'info'" class="app-br-10" >
								<span class="app-regular-font" >{{item.name}}</span>
          </el-tag>
        </span>
									<span style="color:#409eff" class="app-pointer" @click="addTag">编辑</span>
								</div>
							</div>

							<div class="app-gap-block-top">
					<el-tag class="app-blue-card" style="width:500px">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
						<div class="app-card-title">{{form.size}}</div>
						<div class="app-card-desc">总人数</div>
					</div>
					<div class="app-card-item app-border-right">
						<div class="app-card-title">{{form.client_size}}</div>
						<div class="app-card-desc">总客户数<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
								<div class="app-container">群内的全部客户数</div>
								<template #reference>
									<MyIcon class="question-icon" name="Question" />
								</template>
							</el-popover></div>
					</div>
					<div class="app-card-item app-border-right">
						<div class="app-card-title">{{form.day_add}}</div>
						<div class="app-card-desc">今日新增<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
								<div class="app-container">今日群内新增的人数，包括员工数</div>
								<template #reference>
									<MyIcon class="question-icon" name="Question" />
								</template>
							</el-popover></div>
					</div>
					<div class="app-card-item">
						<div class="app-card-title">{{form.day_del}}</div>
						<div class="app-card-desc">今日流失<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
								<div class="app-container">今日群内流失的人数，包括员工数</div>
								<template #reference>
									<MyIcon class="question-icon" name="Question" />
								</template>
							</el-popover></div>
					</div>
					</div>
				</el-tag>
			
				

			</div>
						</div>
						<el-card style="margin-left: 16px;" shadow="never" class="box-card">
							<template #header>
								<div class="card-header">
									<span>群公告</span>
									<div class="flex-center group-refresh" @click="handleSync"><MyIcon class="icon-refresh" name="Refresh" /> 更新</div>
								</div>
							</template>
							<div class="text" v-if="form.notice">{{ form.notice}}</div>
							<div class="text" style="color:#999;display: flex;justify-content: center;" v-else>暂无公告</div>
						</el-card>
					</div>
				</div>
				<div style="margin-top:-14px">
					<Chart ref="charts" />
				</div>
				<div style="margin-top:-14px">
					<Table ref="table" @showDetail="showDetail($event,id)" @showStaffDetail="showStaffDetail($event,id)" />
				</div>
			</div>
			<Detail1  ref="detail1" @diaUpdate="getData" />
			<div v-if="!isShow">
				<div>
					<el-row :gutter="20">
						<el-col :span="16"
							><div class="grid-content ep-bg-purple" style="background-color: #fff; padding: 15px; height: 110px">
								<img style="width: 80px; border-radius: 5px; float: left" :src="drawerdata.avatar" />
								<div style="float: left; margin-left: 10px">
									<div style="font-size: 18px">{{ drawerdata.name }}</div>
								</div>
							</div></el-col
						>
						<el-col :span="8"
							><div
								class="grid-content ep-bg-purple-light"
								style="background-color: #fff; padding: 15px; height: 110px"
							>
								<div style="display: inline-block; width: 50%; text-align: center; border-right: 1px solid #eee">
									<div style="font-size: 12px; font-weight: 600; color: #8691a4; line-height: 17px">客户总数</div>
									<div>
										<span style="font-size: 32px; font-weight: 600; color: #394457; line-height: 45px">{{
											drawerdata.all_count
										}}</span
										><span style="font-weight: 400; color: #8691a4; line-height: 17px">人</span>
									</div>
								</div>
								<div style="display: inline-block; width: 50%; text-align: center">
									<div style="font-size: 12px; font-weight: 600; color: #8691a4; line-height: 17px">今日新增</div>
									<div>
										<span style="font-size: 32px; font-weight: 600; color: #394457; line-height: 45px">{{
											drawerdata.add_count
										}}</span
										><span style="font-weight: 400; color: #8691a4; line-height: 17px">人</span>
									</div>
								</div>
							</div></el-col
						>
					</el-row>
				</div>
				<div style="background-color: #fff; margin-top: 15px; padding: 10px">
					<div>
						<h3>客户列表</h3>
					</div>
					<div style="">
						<el-table :data="drawerdata.customer" style="width: 100%">
							<el-table-column prop="name" label="全部客户" width="180" />
							<el-table-column prop="name" label="标签" width="180">
								<template #default="scope">
									<el-tag v-for="item in scope.row.tags" style="margin-left: 3px">{{ item }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="createtime" label="添加时间" />
							<el-table-column prop="address" label="操作">
								<template  #default="scope">
									<!-- <el-button type="primary" text>聊天记录</el-button> -->
									<el-button type="primary" text @click="showDetail(scope.row.id)">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<style lang="scss" scoped>
@import url('../../../../style/app-component.scss');
:deep(.el-card) {
	border: 0;
	border-radius: 0;
}
.text {
	font-size: 14px;
	color: #000000a6;
}
.flex-center {
	display: flex;
	align-items: center;
}
:deep(.el-drawer) {
	--el-drawer-padding-primary: 0px;
}
.box-item {
	font-size: 14px;
}
.draw-container {
	position: relative;
	width: 100%;
	min-height: 100vh;

	background-color: #f4f5f7;
	.draw-main {
		padding: 16px;
		.draw-main-gruop {
			display: flex;
			justify-content: space-between;
			width: 100%;
			.box-card {
				width: 392px;
				height: auto;
				.card-header {
					width: 100%;
					justify-content: space-between;
					display: flex;
					align-items: center;
					.group-refresh {
						font-size: 13px;
						color: #666;
						cursor: pointer;
						.icon-refresh {
							margin-right: 3px;
							transform: rotateY(150deg);
						}
					}
				}
			}
			.main-grop-left {
				width: 63.5%;
				padding: 24px;
				background-color: #fff;
				.main-grop-left-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.group-img {
						display: flex;
						.header-btn {
						}
						.group-info {
							margin-left: 16px;
							font-size: 16px;
							color: #333;
							img {
								width: 18px;
								height: 18px;
								margin-right: 2px;
							}
						}
						img {
							width: 64px;
							height: 64px;
						}
					}
				}
			}
		}
	}
	.draw-header {
		// position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 22px 16px 22px 32px;
		background-color: #fff;
		box-shadow: 0 1px 4px 0 rgb(0 0 0 / 6%);
		.title {
			height: 24px;
			line-height: 24px;
			color: #262626;
			font-weight: 700;
			font-size: 16px;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.icon-group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 52px;
			height: 20px;

			.icon-item {
				cursor: pointer;
				color: #000000a6;
			}
			.icon-item:hover {
				color: #8c8c8c;
			}
		}
	}
}
.app-card-item{
	width:120px !important;
}
.app-card-desc{
	display: flex;
	align-items: center;
}
</style>
